<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">提现统计</h3>
    </div>
    
    <div class="box-body">
        <div class="row">
            <!-- 总申请数 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-aqua">
                    <div class="inner">
                        <h3>{$stats.total_applications|default=0}</h3>
                        <p>总申请数</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-list"></i>
                    </div>
                </div>
            </div>
            
            <!-- 待审核申请 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-yellow">
                    <div class="inner">
                        <h3>{$stats.pending_applications|default=0}</h3>
                        <p>待审核申请</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-clock-o"></i>
                    </div>
                </div>
            </div>
            
            <!-- 处理中申请 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-blue">
                    <div class="inner">
                        <h3>{$stats.processing_applications|default=0}</h3>
                        <p>处理中申请</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-spinner"></i>
                    </div>
                </div>
            </div>
            
            <!-- 已完成申请 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-green">
                    <div class="inner">
                        <h3>{$stats.completed_applications|default=0}</h3>
                        <p>已完成申请</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-check"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <!-- 失败申请 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-red">
                    <div class="inner">
                        <h3>{$stats.failed_applications|default=0}</h3>
                        <p>失败申请</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-times"></i>
                    </div>
                </div>
            </div>
            
            <!-- 总提现金额 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-purple">
                    <div class="inner">
                        <h3>¥{$stats.total_amount|default=0|number_format=2}</h3>
                        <p>总提现金额</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-money"></i>
                    </div>
                </div>
            </div>
            
            <!-- 今日申请数 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-teal">
                    <div class="inner">
                        <h3>{$stats.today_applications|default=0}</h3>
                        <p>今日申请数</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-calendar"></i>
                    </div>
                </div>
            </div>
            
            <!-- 空白占位 -->
            <div class="col-lg-3 col-xs-6">
                <div class="small-box bg-gray">
                    <div class="inner">
                        <h3>-</h3>
                        <p>预留统计</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-bar-chart"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header">
                        <h3 class="box-title">快捷操作</h3>
                    </div>
                    <div class="box-body">
                        <ob_link><a href="{:url('withdrawList')}" class="btn btn-primary"><i class="fa fa-list"></i> 查看提现列表</a></ob_link>
                        <ob_link><a href="{:url('withdrawList', ['withdraw_status' => 0])}" class="btn btn-warning"><i class="fa fa-clock-o"></i> 待审核申请</a></ob_link>
                        <ob_link><a href="{:url('export')}" class="btn btn-success"><i class="fa fa-download"></i> 导出数据</a></ob_link>
                        <ob_link><a href="{:url('settings')}" class="btn btn-info"><i class="fa fa-cog"></i> 提现设置</a></ob_link>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.small-box {
    border-radius: 2px;
    position: relative;
    display: block;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

.small-box > .inner {
    padding: 10px;
}

.small-box > .small-box-footer {
    position: relative;
    text-align: center;
    padding: 3px 0;
    color: #fff;
    color: rgba(255,255,255,0.8);
    display: block;
    z-index: 10;
    background: rgba(0,0,0,0.1);
    text-decoration: none;
}

.small-box > .small-box-footer:hover {
    color: #fff;
    background: rgba(0,0,0,0.15);
}

.small-box h3 {
    font-size: 38px;
    font-weight: bold;
    margin: 0 0 10px 0;
    white-space: nowrap;
    padding: 0;
}

.small-box p {
    font-size: 15px;
}

.small-box .icon {
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 0;
    font-size: 90px;
    color: rgba(0,0,0,0.15);
}

.bg-aqua {
    background-color: #00c0ef !important;
    color: #fff !important;
}

.bg-yellow {
    background-color: #f39c12 !important;
    color: #fff !important;
}

.bg-blue {
    background-color: #3c8dbc !important;
    color: #fff !important;
}

.bg-green {
    background-color: #00a65a !important;
    color: #fff !important;
}

.bg-red {
    background-color: #dd4b39 !important;
    color: #fff !important;
}

.bg-purple {
    background-color: #605ca8 !important;
    color: #fff !important;
}

.bg-teal {
    background-color: #39cccc !important;
    color: #fff !important;
}

.bg-gray {
    background-color: #d2d6de !important;
    color: #444 !important;
}
</style>